// Copyright © 2020 The Things Network Foundation, The Things Industries B.V.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.container
  +media-query-min($bp.lg)
    full-screen()
    horizontalize()

.content
  height: 100%
  width: 50%
  position: relative
  display: flex
  flex-direction: column

  &:after
    content: ''
    display:block
    height: $footer-height

.main
  display: flex
  flex-direction: column
  flex: 1 0
  overflow: auto
  align-items: center
  justify-content: center
  padding: $ls.s

.visual
  height: 100%
  width: 50%
  position: relative
  background-image: url('../../../assets/img/layout/bg/login-visual.jpg')
  background-size: cover
  background-position: left
  box-shadow: inset 60px 0 60px rgba(0,0,0,.08)

+media-query($bp.lg)
  .visual
    width: 40%

  .content
    width: 60%

+media-query($bp.lg)
  .visual
    display: none

  .content
    width: 100%

.form
  +media-query($bp.lg)
    margin-top: $header-height-mobile
    padding-bottom: 0
  padding-bottom: $ls.s
  box-sizing: border-box
  min-width: 28rem
  max-width: 30rem

  +media-query($bp.lg)
    min-width: auto
    max-width: none
    width: 100%
    max-width: 30rem

.h-rule
  margin: $ls.s 0

.title
  text-align: center
  margin-top: 0
  font-size: $fs.xl
  line-height: $lh.xxs
  font-weight: $fw.bold
  +media-query($bp.lg)
    font-size: $fs.xl
    text-align: center

.sub-title
  font-size: 3rem
  font-weight: $fw.bolder

.submit-button
  min-width: 8rem

.spinner
  margin-bottom: $cs.m

.buttons
  display: flex
  flex-direction: column
  +media-query-min($bp.lg)
    flex-direction: row
  +media-query($bp.lg)
    button, a
      margin-bottom: $cs.s
      margin-right: 0

.footer
  position: fixed
  bottom: 0
  left: 0
  right: 0
  z-index: $zi.nav
  font-size: $fs.s
  +media-query-min($bp.lg)
    background-color: transparent
    border: 0

.button-break
  +media-query-min($bp.lg)
    display: static

.error-description
  text-margin-bottom($cs.xl)
  display: block

.login-logo
  width: 11rem
  margin-left: auto
  margin-right: auto
  margin-bottom: $ls.s
